<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :model="queryParams"
      class="queryform"
      ref="queryFormRef"
      label-width="80px"
    >
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="菜单名称" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="状态">
          <el-option label="正常" :value="0" />
          <el-option label="禁用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">搜索</el-button>
        <el-button type="" @click="resetForm(queryFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="main-active">
      <el-col :span="1.5">
        <el-button type="primary" plain @click="handleAdd"
          ><el-icon><Plus /></el-icon> <span>新增</span>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain :disabled="single" @click="handleUpdate"
          ><el-icon>
            <Edit />
          </el-icon>
          <span>修改</span>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          :disabled="multiple"
          @click="handleDelete"
          ><el-icon> <Delete /> </el-icon><span>删除</span>
        </el-button>
      </el-col>
    </el-row>

    <div class="main-table">
      <el-table :data="dataList">
        <el-table-column prop="id" label="Date" min-width="150" />
        <el-table-column prop="name" label="Name" min-width="120" />
        <el-table-column prop="state" label="State" min-width="120" />
        <el-table-column prop="city" label="City" min-width="120" />
        <el-table-column prop="address" label="Address" min-width="120" />
        <el-table-column prop="zip" label="Zip" min-width="120" />
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default>
            <el-button link type="primary" size="small" @click="handleDetail"
              >Detail</el-button
            >
            <el-button link type="primary" size="small">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
      <cur-paginate />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { getMenuList } from "@/api/menu";
import curPaginate from "../../../components/common/cur-paginate.vue";

const queryFormRef = ref<FormInstance>();
const queryParams = reactive({
  name: "",
  status: undefined,
});
const single = false;
const multiple = false;

// 表格部分
let dataList = ref();
const getList = () => {
  getMenuList(queryParams).then((res) => {
    console.log("list", res);
    dataList.value = res.data;
    console.log(999, dataList);
  });
};

// 新增部分
const handleAdd = () => {
  console.log("add");
};
const onSubmit = () => {
  console.log("submit!");
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 修改部分
const handleUpdate = () => {
  console.log("update");
};

// 新增修改提交数据

// 删除
const handleDelete = () => {
  console.log("delete");
};

// 详情
const handleDetail = () => {
  console.log("detail");
};

// 页面渲染完成，初始化
onMounted(async () => {
  getList();
});
</script>

<style lang="scss" scoped>
</style>
